<template>
  <view class="container">
    <view v-if="loading" class="loading">加载中...</view>
    <view v-else>
      <view v-if="favorites.length === 0" class="empty">
        <image src="/static/images/empty.png" class="empty-img"></image>
        <text class="empty-text">你还没有收藏任何商品</text>
      </view>
      <view v-else class="favorite-list">
        <view v-for="item in favorites" :key="item.id" class="favorite-item">
          <image :src="item.mainImage || '/static/images/default-category.png'" class="item-img" @click="goToProductDetail(item.id)" />
          <view class="item-info" @click="goToProductDetail(item.id)">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-price">¥{{ formatPrice(item.price) }}</text>
          </view>
          <button class="remove-btn" @click.stop="removeFavorite(item.id)">移除</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { favoriteApi } from '../../api/favorite.js';

const favorites = ref([]);
const loading = ref(true);

const loadFavorites = async () => {
  loading.value = true;
  try {
    const res = await favoriteApi.getFavorites();
    if (res.code === 200) {
      favorites.value = res.data || [];
    } else {
      uni.showToast({ title: res.msg || '获取收藏失败', icon: 'none' });
    }
  } catch (e) {
    uni.showToast({ title: '获取收藏失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

const removeFavorite = async (id) => {
  uni.showModal({
    title: '提示',
    content: '确定要移除该收藏吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          const r = await favoriteApi.removeFavorite(id);
          if (r.code === 200) {
            favorites.value = favorites.value.filter(item => item.id !== id);
            uni.showToast({ title: '移除成功', icon: 'success' });
          } else {
            uni.showToast({ title: r.msg || '移除失败', icon: 'none' });
          }
        } catch (e) {
          uni.showToast({ title: '移除失败', icon: 'none' });
        }
      }
    }
  });
};

const goToProductDetail = (productId) => {
  uni.navigateTo({ url: `/pages/product/detail?id=${productId}` });
};

const formatPrice = (price) => {
  if (typeof price !== 'number') price = parseFloat(price);
  if (isNaN(price)) return '0.00';
  return price.toFixed(2);
};

onMounted(loadFavorites);
</script>

<style>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}
.header {
  font-size: 34rpx;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 0 20rpx 0;
  background: #fff;
}
.loading {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.favorite-list {
  padding: 20rpx;
}
.favorite-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.item-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.item-info {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.item-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}
.item-price {
  font-size: 26rpx;
  color: #ff6700;
  font-weight: bold;
}
.remove-btn {
  background: #ff4757;
  color: #fff;
  border: none;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  margin-left: 20rpx;
}
</style> 